<template>
    <div>
        <div class="show-pc">
            <div class="menu-container" style="color: var( --color-text);">
                <!-- 显示前7个菜单项 -->
                <div v-for="item in visibleMenuItems" :key="item.key" class="menu-item"
                    :class="{ active: activeKey === item.key }" @click="handleMenuClick(item)"
                    :style="{ color: activeKey === item.key ? 'var(--color-Sel)' : 'inherit' }">
                    {{ item.label }}
                </div>

                <!-- 显示更多按钮 -->
                <div v-if="hasHiddenItems" class="more-button" @click="showHiddenItems = true"
                    @mouseenter="showHiddenItems = true">
                    <div class="drop_box">

                        <img src="../../../assets/images/new_img/点9.png" alt="" class="drop_img ">

                    </div>
                    <!-- 隐藏的菜单项（悬浮显示） -->
                    <div v-show="showHiddenItems" class="hidden-menu-items" @mouseleave="showHiddenItems = false">
                        <div v-for="item in hiddenMenuItems" :key="item.key" class="menu-item"
                            :class="{ active: activeKey === item.key }" @click="handleMenuClick(item)"
                            :style="{ color: activeKey === item.key ? 'var(--color-Sel)' : 'inherit' }">
                            {{ item.label }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="show-wap">
            <div style="color: var(--color-text);" class="menu-container-wap">
                <!-- 显示前7个菜单项 -->
                <div v-for="item in visibleMenuItemsWap" :key="item.key" :class="{ active: activeKey === item.key }"
                    @click="handleMenuClick(item)"
                    :style="{ color: activeKey === item.key ? 'var(--color-Sel)' : 'inherit' }">
                    {{ item.label }}
                </div>

                <!-- 显示更多按钮 -->
                <div v-if="hasHiddenItemsWap" @click="toggleHiddenItems"
                    style=" display: flex;justify-content: center;align-items: center;">
                    <!-- <div class="drop_box-wap"> -->
                    <img src="../../../assets/images/new_img/点9.png" alt="" class="drop_img-wap">
                    <!-- </div> -->

                </div>
                <!-- 隐藏的菜单项（点击显示） -->
                <div v-if="showHiddenItems" class="hidden-menu-items-wap" @click.stop>
                    <div v-for="item in hiddenMenuItemsWap" :key="item.key" :class="{ active: activeKey === item.key }"
                        @click="handleMenuClick(item)"
                        :style="{ color: activeKey === item.key ? 'var(--color-Sel)' : 'inherit' }"
                        style="margin-top: 6px;">
                        {{ item.label }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, defineProps, defineEmits } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from '@/store'



const { themeStore } = useStore()
const searchPosition = ref()



watch(() => {
    searchPosition.value = themeStore.searcShow.visible
})

const props = defineProps({
    activeKey: {
        type: String,
        default: ''
    }
});

const emits = defineEmits(['menuClick']);

const router = useRouter();

const menuList = ref([
    { key: 'standardPath', label: 'VI标准' },
    { key: 'PandaIPstandard', label: '熊猫IP标准' },
    { key: 'Pinpushstandard', label: '品推标准' },
    { key: 'Marketingstandards', label: '营销类标准' },
    { key: 'Corporateimagestandard', label: '企业形象标准' },
    { key: 'ClassAschedulesetting', label: 'A类档期设置' },
    { key: 'BCclassdesignactivity', label: 'BC类设计活动' },
    { key: 'Specialenterprisedesign', label: '特别企化设计' },
    { key: 'Mediapublicitydesign', label: '媒体宣传设计' },
    { key: 'MembershipandCustomerService', label: '会员及客服' },
    { key: 'NightOleDesign', label: '夜奥莱设计' },
    { key: 'ConventionalAmericandesign', label: '常规美陈设计' },
    { key: 'Picturedata', label: '图片资料' },
    { key: 'Sandboatwhimsy', label: '砂之船奇思妙想' },
    { key: 'AImap', label: 'AI生图' }
]);

// 控制是否显示隐藏项
const showHiddenItems = ref(false);

// 计算属性：可见的菜单项（前7个）
const visibleMenuItems = computed(() => menuList.value.slice(0, 7));

// 计算属性：隐藏的菜单项（第8个及以后）
const hiddenMenuItems = computed(() => menuList.value.slice(7));

// 计算属性：是否有隐藏项
const hasHiddenItems = computed(() => hiddenMenuItems.value.length > 0);

// 手机端
// 计算属性：可见的菜单项（前4个）
const visibleMenuItemsWap = computed(() => menuList.value.slice(0, 3));

// 计算属性：隐藏的菜单项（第5个及以后）
const hiddenMenuItemsWap = computed(() => menuList.value.slice(3));

// 计算属性：是否有隐藏项
const hasHiddenItemsWap = computed(() => hiddenMenuItemsWap.value.length > 0);

// 菜单点击处理
const handleMenuClick = (item) => {

    console.log("点击后", !searchPosition.value);

    Object.assign(themeStore.searcShow, {
        visible: searchPosition.value,
        txet: item.label,
        title: item.label
    });

    emits('menuClick', item.key);
    if (item.key === 'AImap') {
        router.push('/AImap');
    } else {

        router.push({
            path: `/standardPath/`,
            // query: { key: item.key, label: item.label }
        });
    }
    showHiddenItems.value = false; // 点击后隐藏下拉菜单
};


// 手机端点击事件
const toggleHiddenItems = () => {
    showHiddenItems.value = !showHiddenItems.value;
},
    handleHiddenItemClick = (item) => {
        this.handleMenuClick(item);
        showHiddenItems.value = false; // 点击后关闭菜单
    }

</script>

<style lang="less" scoped>
.drop_img.dark {
    display: none;
}

html.dark .drop_img.light {
    display: none;
}

html.dark .drop_img.dark {
    display: block;
}

.menu-container {
    display: flex;
    align-items: center;
    border-radius: 0.2vw;
    position: relative;
    gap: 1vw;


    .menu-item {
        padding: 0px 0.3vw;
        cursor: pointer;
        white-space: nowrap;
        font-size: 0.83vw;
        color: #999999;
        font-weight: 500;


    }

    .more-button {
        width: 4.16vw;
        position: relative;
        padding: 0.41vw 0.62vw;
        font-size: 0.83vw;
        color: #999999;
        font-weight: 500;

        .drop_box {
            width: 1.8vw;
            height: 0.4vw;
            display: flex;
            align-items: center;
            justify-content: center;

            .drop_img {
                width: 100%;
                height: 100%;
            }
        }

        .hidden-menu-items {
            position: absolute;
            top: 2.9vw;
            right: 0;
            border: 1px solid var(--border-ls);
            border-radius: 0.2vw;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            z-index: 100;
            display: flex;
            gap: 0.4vw;
            flex-direction: column;
            padding: 10px;
            background-color: var(--color-bg);


        }
    }
}

.menu-container-wap {

    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    font-size: var(--text-16px);
    position: relative;
    flex-wrap: wrap;

    .hidden-menu-items-wap {
        position: absolute;
        top: 40px;
        right: 0;
        background-color: var(--color-bg);
        padding: 10px;
        font-size: var(--text-16px);
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        z-index: 100;
        display: flex;
        flex-direction: column;
        border: 1px solid var(--border-ls);
    }


    .drop_img-wap {
        width: 32px;
        height: 8px;
    }



}
</style>